<template>
	<div class="map">
		<slot v-if="ready"></slot>
	</div>
</template>
<script>
import {Map}   from 'leaflet';
export default {
	data() {
		return {
			map: null,
			ready:false,
		};
	},
	props: ['center'],
	provide() {
		return {
			getMap: this.getMap,
		};
	},
	mounted() {
		this.initMap()
	},
	methods: {
        initMap(){
            // 初始化地图控件
            this.map = new Map(this.$el, {
                center:this.center,
                zoom: 4,
            });
			this.ready=true;
            this.$emit('loaded', this.map);
        },

		getMap(found) {
			let vm = this;
			function checkForMap() {
				if (vm.map) {
					found(vm.map);
				} else {
					setTimeout(checkForMap, 100);
				}
			}
			checkForMap();
		}
	},
};
</script>
<style scoped>
.map {
	background: #66666c;
	width: 100%;
	height: calc(100vh);
}
</style>
